<template>
	<view class="customer-tabs flex-c-a">
		<view 
		:class="['tabs-item flex-c-col',i === currentTabs ? 'active-tabs' : '']" v-for="(t, i) in tabsList" :key="i"
		@click="toggleTabs(i)">
			{{ t }}
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, toRefs, ref} from 'vue'
import { onReady } from '@dcloudio/uni-app'

export default defineComponent({
	props: {
		tabsList: {
			type: Array,
			default: () => ([1,2,3,4])
		},
		change: {
			type: Function,
			default: () => {}
		}
	},
	
	setup() {
		const currentTabs = ref(0)
		const toggleTabs = (n: number) => {
			currentTabs.value = n
			change && change()
		}
		
		onReady(() => {
			console.log();
		})
		return { 
			currentTabs,
			toggleTabs
		}
	}
})
</script>

<style lang="scss" scoped>
.customer-tabs{
	height: 80rpx;
	.tabs-item{
		font-size: 26rpx;
		min-width: 60rpx;
		height: 80rpx;
		color: #999999;
	}
	.active-tabs{
		background-image: url(/static/images/Line3@2x.png);
		background-position: center bottom;
		 background-repeat: no-repeat;
		 background-size: 34rpx 16rpx;
		color: #000;
	}
}
</style>